import React, { Component } from 'react'
import { fetchData } from '../../../components/AjaxConsumer'
import { Form, Input, Row, Col, Button, message, Radio } from 'antd';
import { SelectUrl } from '../../../components';
import ListModelDetail from './SearchModel'

const FormItem = Form.Item;
const RadioGroup = Radio.Group;

class CheckAloneForm extends React.Component {
    state = {
        loading: false,
        formData: {},
        suburl: this.props.suburl,
        checkValue: null,
        rowData: this.props.rowData
    };

    componentWillReceiveProps(newProps) {
        this.setState({
            rowData: newProps.rowData
        });
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, fieldsValue) => {
            if (!err) {
                this.setState({ loading: true });
                let values = {
                    ...fieldsValue,
                };
                console.log('表单提交数据-----------', values);
                //发送ajax 控制请求数据规则，无值的设为空
                for (let item in values) {
                    if (!values[item]) {
                        values[item] = ''
                    }
                }
                const options = {
                    url: this.state.suburl,
                    type: 'post',
                    condition: values
                };

                fetchData(this, options, (res) => {
                    //成功回调函数
                    this.setState({
                        loading: false
                    });
                    if (res.code == '1') {
                        message.success('操作成功');

                        this.handleCancel();
                        this.props.refreshHandle();
                    } else {
                        //message.error(res.msg);
                    }

                },
                    (res) => {
                        this.setState({
                            loading: false
                        });
                    }
                )
            }
        });
    }

    handleCancel = () => {
        console.log("取消");
        this.props.onCancel();
        this.props.form.resetFields(); //初始化表单
        this.setState({
            checkValue: null,
        });
    }

    CheckAloneChange = (e) => {
        console.log('radio checked', e.target.value);
        this.setState({
            checkValue: e.target.value,
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 18 }
            }
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: { span: 24, offset: 0 },
                sm: { span: 24, offset: 10 }
            }
        };

        let objectInfo = this.state.rowData;
        console.log("objectInfo：\n", JSON.stringify(objectInfo, null, 4));
        return (
            <div>
                <Form
                    onSubmit={this.handleSubmit}
                    style={{
                        backgroundColor: '#fff',
                        paddingTop: '20px',
                        paddingBottom: '20px'
                    }}>
                    <Row>
                        <Col span={0}>
                            <FormItem>
                                {getFieldDecorator('sellOutNo', {
                                    initialValue: objectInfo.sellOutNo ? objectInfo.sellOutNo.toString() : "",
                                    rules: [
                                        {}
                                    ]
                                })(<Input type="hidden" />)}
                            </FormItem>
                            <FormItem>
                                {getFieldDecorator('sellOutId', {
                                    initialValue: objectInfo.sellOutId ? objectInfo.sellOutId.toString() : "",
                                    rules: [
                                        {}
                                    ]
                                })(<Input type="hidden" />)}
                            </FormItem>
                            {/* <FormItem>
                                {getFieldDecorator('model', {
                                    initialValue: objectInfo.model ? objectInfo.model.toString() : "",
                                    rules: [
                                        {}
                                    ]
                                })(<Input type="hidden" />)}
                            </FormItem> */}
                        </Col>

                        <Col span={24}>
                            <FormItem {...formItemLayout} label="审核">
                                {getFieldDecorator('sellOutStatus', {
                                    initialValue: '3',
                                    rules: [
                                        {
                                            required: true, whitespace: true, message: '请选择是否通过审核'
                                        }
                                    ]
                                })(
                                    <RadioGroup onChange={this.CheckAloneChange}>
                                        <Radio value="3">审核通过</Radio>
                                        <Radio value="4">审核不通过</Radio>
                                    </RadioGroup>
                                )}
                            </FormItem>
                        </Col>

                        {
                            this.state.checkValue == '4' ?
                                <Col span={24}>
                                    <FormItem  {...formItemLayout} label='备注' hasFeedback>
                                        {getFieldDecorator('remark', {
                                            initialValue: objectInfo.remark ? objectInfo.remark.toString() : "",
                                            rules: [{
                                                required: true, message: '请输入不通过理由!'
                                            }, {
                                                whitespace: true, message: '不能为空'
                                            }]
                                        })(<Input style={{ width: 180 }} type="remark" rows={2} />)}
                                    </FormItem>
                                </Col>
                                :
                                <Col span={24}>
                                    <FormItem  {...formItemLayout} label='备注' hasFeedback>
                                        {getFieldDecorator('remark', {
                                            initialValue: objectInfo.remark ? objectInfo.remark.toString() : "",
                                            rules: [{
                                                required: false, message: '请输入不通过理由!'
                                            }, {
                                                whitespace: true, message: '不能为空'
                                            }]
                                        })(<Input style={{ width: 180 }} type="remark" rows={2} />)}
                                    </FormItem>
                                </Col>
                        }

                        <Col span={24} style={{ textAlign: 'center', marginTop: '10px' }}>
                            <Button type="primary" htmlType="submit" size="large">
                                {this.state.loading ? '提交中...' : '确定'}
                            </Button>
                            <Button type="default" style={{ marginLeft: '50px' }} size="large" onClick={this.handleCancel}>
                                取消
                                </Button>
                        </Col>
                    </Row>
                </Form>

                <ListModelDetail getTableData={this.getListModelDetailData} ref='listModelDetail' />
            </div>
        );
    }
}

export default Form.create()(CheckAloneForm);
